<template>
	<view class="content">
		<template v-if="form.check_status!==2">
			<view class="info-block">
				<view class="title FangZhengHanZhenGuangBiaoJianTi">房屋信息</view>
				<view class="info-item">
					<view class="title-item">
						<view class="must">*</view>
						<view class="name">所在小区</view>
					</view>
					<view class="form-item">
						<picker class="form-crl" :range="houseList" :value="recruitType" @change="bindType"
							range-key="name">
							{{recruitType== -1 ? "请选择你所在的小区" : houseList[recruitType].name}}
						</picker>
						<view class="arrow iconfont icon-a-gengduo1"></view>
					</view>
				</view>
				<view class="info-item" v-if="form.recruitType">
					<view class="title-item">
						<view class="must">*</view>
						<view class="name">详细住址</view>
					</view>
					<view class="form-item">
						<uni-section title="详细住址" type="line" class="form-crl">
							<uni-data-picker :localdata="unitList" popup-title="请选择详细住址" v-model="form.unitType"
								@change="onchange" @nodeclick="onnodeclick">
							</uni-data-picker>
						</uni-section>
						<!-- <view class="arrow iconfont icon-a-gengduo1"></view> -->
					</view>
				</view>
				<view class="info-item">
					<view class="title-item">
						<view class="must">*</view>
						<view class="name">是否为业主</view>
					</view>
					<view class="form-item">
						<picker class="form-crl" :range="householdList" :value="household" @change="bindHousehold($event,'area')"
							range-key="name">
							{{household==-1 ? "是否为业主" : householdList[household]['name']}}
						</picker>
						<view class="arrow iconfont icon-a-gengduo1"></view>
					</view>
				</view>
			</view>
		</template>
		<view @click="handleSave" class="btn" v-if="form.check_status!==2">提交</view>
		<template v-else>
			<view class="info-block">
				<view class="title FangZhengHanZhenGuangBiaoJianTi">房屋信息</view>
				<view class="info-item">
					<view class="title-item">
						<view class="must">*</view>
						<view class="name">所在小区</view>
					</view>
					<view class="form-item">
						<picker class="form-crl" :range="houseList" :value="recruitType" @change="bindType"
							range-key="name" disabled="true">
							{{houseList[recruitType].name}}
						</picker>
						<view class="arrow iconfont icon-a-gengduo1"></view>
					</view>
				</view>
				<view class="info-item">
					<view class="title-item">
						<view class="must">*</view>
						<view class="name">详细住址</view>
					</view>
					<view class="form-item">
						<view class="form-crl">{{form.house_ids_text}}</view>
						<view class="arrow iconfont icon-a-gengduo1"></view>
					</view>
				</view>
				<view class="info-item">
					<view class="title-item">
						<view class="must">*</view>
						<view class="name">是否为业主</view>
					</view>
					<view class="form-item">
						<view class="form-crl">{{form.is_host_text}}</view>
						<view class="arrow iconfont icon-a-gengduo1"></view>
					</view>
				</view>
			</view>
		</template>
	</view>
</template>

<script>
	import {
		getHouseListApi,
		getHouseTreeApi,
		saveHouse
	} from '@/api/house.js'
	import {
		validate
	} from '@/util/validate.js'
	import {
		getUserApi
	} from '@/api/login.js'
	export default {
		data() {
			return {
				form: {
					unitType: [],
					recruitType: -1,
					household: -1,
					ids: null
				},
				houseList: [],
				longitude: this.$store.getters.position.longitude,
				latitude: this.$store.getters.position.latitude,
				unitList: [],
				recruitType: -1,
				household: -1,
				// listMap: {
				// 	text: 'name',
				// 	value: 'id',
				// 	children: 'child'
				// },
				householdList: [{
						id: 1,
						name: '是'
					},
					{
						id: 2,
						name: '否'
					}
				],
				unitType: [],
				rules: {
					recruitType: {
						name: '所在的小区',
						required: true,
						validator: function(value, form, callback) {
							if (value < 0) {
								callback('请选择你所在的小区')
							}
							callback();
						}
					},
					unitType: {
						name: '请选择单元',
						required: true,
					},
					household: {
						name: '是否为业主',
						required: true,
						validator: function(value, form, callback) {
							if (value < 0) {
								callback('是否为业主')
							}
							callback();
						}
					},
				}
			}
		},
		methods: {
			onchange(e) {
				const data = e.detail.value
				data.forEach((item) => {
					if (item.value) {
						this.unitType.push(item.value)
					}
				})
				this.form.unitType = this.unitType
			},
			onnodeclick(node) {},
			bindType(e) {
				this.form.recruitType = e.detail.value;
				this.recruitType = e.detail.value;
				this.getHouseTree();
			},
			bindHousehold(e) {
				this.form.household = e.detail.value;
				this.household = e.detail.value;
			},

			getHouseList() {
				uni.showLoading()
				getHouseListApi({
					longitude: this.longitude,
					latitude: this.latitude
				}).then(res => {
					this.houseList = res || [];
				}).catch(() => {
					uni.hideLoading()
				})
			},
			getHouseTree() {
				uni.showLoading()
				getHouseTreeApi({
					id: this.houseList[this.form.recruitType].id
				}).then(res => {
					//this.unitList = res || [];
					let data = res
					data.forEach((item) => {
						item.value = item.id
						item.text = item.name
						if (item.child) {
							item.children = item.child
							item.children.forEach((item1) => {
								item1.value = item1.id
								item1.text = item1.name
								if (item1.child) {
									item1.children = item1.child
									item1.children.forEach((item2) => {
										item2.value = item2.id
										item2.text = item2.name
										if (item2.child) {
											item2.children = item2.child
										}
									})
								}
							})
						}
					})
					this.unitList = data || [];
				}).catch(() => {
					uni.hideLoading()
				})
			},
			handleSave() {
				if (validate(this.form, this.rules)) {
					uni.showLoading()
					this.form.unitType = this.form.unitType.join(',')
					this.form.ids = this.houseList[this.form.recruitType].id + ',' + this.form.unitType
					this.form.household = this.householdList[this.form.household].id
					saveHouse({
						house_ids: this.form.ids,
						is_host: this.form.household
					}).then(res => {
						this.showToast('提交成功', () => {
							uni.switchTab({
								url: '/pages/mine/mine'
							})
						})
					}).catch(() => {
						uni.hideLoading()
						this.showToast('提交失败');
					})
				}
			},
			getDetail() {
				uni.showLoading()
				getUserApi({}).then(res => {
					this.form = res.userInfo;
					const houseIds = res.userInfo.house_ids.split(',')
					this.houseList.forEach((item, index) => {
						if (item.id == houseIds[0]) {
							this.recruitType = index;
							return;
						}
					})
				}).catch(() => {
					uni.hideLoading()
				})
			},
		},
		onShow() {
			this.getHouseList()
			this.getDetail()
		}
	}
</script>

<style lang="scss">
	.input-value-border {
		border: none !important;
		display: flex !important;
		justify-content: space-between !important;
	}

	.placeholder {
		color: #000 !important;
		font-size: 30rpx !important;
	}

	.arrow-area {
		width: 16px !important;
	}

	.input-value {
		padding: 0 !important;
	}

	.input-arrow {
		width: 9px !important;
		height: 9px !important;
		border-right: 1px solid #000 !important;
		border-bottom: 1px solid #000 !important;
		border-left: none !important;
	}

	.item {
		padding: 0 30rpx !important;
		height: 80rpx !important;
	}

	.content {
		background: #F7F6F9;
		padding: 30rpx;
		min-height: 100vh;

		.info-block {
			display: flex;
			flex-direction: column;
			background-color: #fff;
			padding: 30rpx;
			border-radius: 20rpx;
			margin-bottom: 30rpx;

			.title {
				color: #BA1519;
				margin-top: 20rpx;
			}

			.info-item:last-child {
				border-bottom: none;
			}

			.info-item {
				display: flex;
				flex-direction: column;
				border-bottom: 1px solid #F7F6F9;
				margin-top: 20rpx;

				.title-item {
					display: flex;
					align-items: center;
					line-height: 80rpx;

					.must {
						color: #BA1519;
					}

					.name {}
				}

				.form-item {
					display: flex;
					justify-content: space-between;
					align-items: center;

					.form-crl {
						flex-grow: 1;
						height: 90rpx;
						font-size: 30rpx;
						line-height: 90rpx;
						color: #000;
						border: none;
					}

					.form-ctrl {
						flex-grow: 2;
						height: 90rpx;
						font-size: 30rpx;
						line-height: 90rpx;
					}

					.form-ctr2 {
						font-size: 30rpx;
						margin-top: 20rpx;
					}
				}
			}
		}

		.btn {
			background-color: #BA1519;
			color: #fff;
			width: 400rpx;
			height: 90rpx;
			border-radius: 60rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 28rpx;
			margin: 0 auto;
			margin-top: 30rpx;
		}
	}
</style>